<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM对象与JQuery对象</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        #one{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="one"></div>
</body>
<script>
    // 入口函数
    $(function () {
        // 1. dom对象
        // 原生js选择器获取到的对象
        // 特点: 只能调用dom方法或者属性 不能调用jquery的属性或者方法
        var div1 = document.getElementById('one');
        div1.style.backgroundColor = 'red';     // dom属性可以调用dom属性或者方法
    });

    $(function () {
        // 2. jquery对象
        // 利用jquery选择器获取到的对象
        // 特点: 只能调用jquery的方法和属性 不能调用原生方法和属性
        // jquery对象实际上就是dom对象的包装集
        var $div1 = $('#one');
        $div1.css('backgroundColor', 'green');
        console.log($div1);
        console.log($div1.__proto__=== Array.prototype);    // false jquery对象是一个伪数组

        // 3. jquery对象和dom对象的转换
        var div1 = document.getElementById('one');
        $(div1);    // 此时他转换为了jquery对象
        // 使用下标取出dom对象
        var div2 = $div1[0];
        // 使用jquery的get方法取出dom对象
        var div3 = $div1.get(0);
    })
</script>
</html>